<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
let db, request, dbName = 'admin', storeName = 'users',version = 14;//版本只能增加不能减少
request = indexedDB.open(dbName, version);//打开一个数据库，如果不存在则创建这个数据库。 返回IDBRequest实例



request.onupgradeneeded=event=>{//open后如不存在会调用此方法 创建数据库模式
    db = event.target.result
    if(db.objectStoreNames.contains(storeName)){
        console.log("删除数据库模式")
        db.deleteObjectStore(storeName)//不删除会创建失败，因为名字相同
    }
    console.log("创建数据库模式")
    let store = db.createObjectStore(storeName,{keyPath:"username"})//指定键名
    store.createIndex("username","username",{unique:true})
}
request.onerror=event=>{
    console.log('打开失败:',event.target.errorCode)
}

request.onsuccess=event=>{
    console.log('打开成功:',event.target.result)
    db = event.target.result
}

const userList = [
    {
        username:'张一',
        phone:'123456',
        age:22,
        weight:75
    },
    {
        username:'张二',
        phone:'1234567',
        age:22,
        weight:44
    },
    {
        username:'张三',
        phone:'1234568',
        age:12,
        weight:76
    },
    {
        username:'张四',
        phone:'1234569',
        age:32,
        weight:75
    },
    {
        username:'张五',
        phone:'1234560',
        age:22,
        weight:71
    },
]


function addData(db, storeName, datas){
    const transaction = db.transaction(storeName, "readwrite");
    const store = transaction.objectStore(storeName);
    let request, requests=[];
    for (const data of datas) {
        request = store.add(data)//参数是对象
        request.onsuccess=()=>{
            console.log('add成功')
        }
        request.onerror=()=>{
            console.log("add失败")
        }
        requests.push(request)
    }
}
function getData(db, storeName, keyPath){
    const transaction = db.transaction(storeName);
    const store = transaction.objectStore(storeName);
    let request 
    request = store.get(keyPath)//参数是键
    request.onsuccess=(event)=>{
        console.log('get成功:',event.target.result)
    }
    request.onerror=()=>{
        console.log("get失败")
    }
}
function updateDb(db, storeName, data){
    const transaction = db.transaction(storeName, "readwrite");
    const store = transaction.objectStore(storeName);
    let request 
    
    request = store.put(data)//参数是对象
    request.onsuccess=(event)=>{
        console.log('put成功:',event.target.result)//返回key
    }
    request.onerror=()=>{
        console.log("put失败")
    }
}
function deleteData(db, storeName, keyPath){
    const transaction = db.transaction(storeName, "readwrite");
    const store = transaction.objectStore(storeName);
    let request 
    request = store.delete(keyPath)//参数是键
    request.onsuccess=()=>{
        console.log('delete成功')//永远成功
    }
    request.onerror=()=>{
        console.log("delete失败")
    }
}
function cursorGetData(db, storeName){
    let request = db.transaction(storeName, "readwrite").objectStore(storeName).openCursor();
    request.onsuccess=event=>{
        const cursor = event.target.result
        if(cursor){
            console.log('cursor',cursor)
            cursor.continue();
        }
    }
    request.onerror=event=>{
        console.log('cursor error')
    }
}
function getDataByIndex(db, storeName, indexName, indexValue ){
    let store = db.transaction(storeName,"readwrite").objectStore(storeName)
    
    let request = store.index(indexName).getKey(indexValue);
    request.onsuccess=event=>{
        console.log('索引查：',event.target.result)
    }
    request.onerror=event=>{
        console.log('索引 error')
    }
}
setTimeout(()=>{
    // addData(db, storeName, userList)
    // getData(db, storeName, "张三")
    // updateDb(db, storeName, {
    //     username:'张一',
    //     phone:'123456',
    //     age:100,
    //     weight:75
    // })
    // deleteData(db, storeName, "张一1")
    // getData(db, storeName, "张一")
    // cursorGetData(db, storeName)
    getDataByIndex(db, storeName, "username","张二")

},100)


    </script>
</body>
</html>